<template>
  <div class="com-container">
      <div class="com-chart" ref="seller_ref" style="height:550px"></div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
    data(){
        return{
            allData:null,
            chartInstance:null,
            currentPage:1,
            totalPage :0,
            timerId:null,
            // autoHeight:650
            // windowHeight:0
        }
    },
    // computed:{
    //     comHeight(){
    //         return {
    //             height:this.windowHeight-150+'px'
    //         }
    //     }
    // },
    mounted(){
        this.initCharts();
        this.getData();
        window.addEventListener('resize',this.screenAdapter);
        
        this.screenAdapter();
    },
    destroyed(){
        clearInterval(this.timerId);
        window.removeEventListener('resize',this.screenAdapter);
    },
    methods:{
        initCharts(){
            var resp =this.$refs.seller_ref;
            console.log(resp);
            this.chartInstance =window.echarts.init(resp,'chalk')

            const initOption ={
                tooltip:{
                    trigger:'axis',
                    
                    axisPointer:{
                        type:'line',
                        z:0,
                        lineStyle:{
                            width:66,
                            color:'#2d3443',
                        }
                    }
                },
                title:{
                    text:'▎商家销售记录',
                    textStyle:{
                        fontSize:66
                    },
                    left:20,
                    top:20
                },
                grid:{
                    top:'20%',
                    left:'3%',
                    right:'6%',
                    bottom:'3%',
                    containLabel:true
                },
                
                xAxis:{
                    type:'value'
                },
                yAxis:{
                    type:'category',
                },
                series:[
                    {
                        type:'bar',
                        barWidth:66,
                        label:{
                            show:true,
                            position:'right',
                            textStyle:{
                                color:'white'
                            }
                        },
                        itemStyle:{
                            barBorderRadius:[0,33,33,0],
                            color:new window.echarts.graphic.LinearGradient(0,0,1,0,[
                                {
                                    offset:0,
                                    color:'#5052EE'
                                },
                                {
                                    offset:1,
                                    color:'#AB6EE5'
                                }
                            ])
                        }
                    }
                ]
                
            
            }
            this.chartInstance.setOption(initOption);
            this.chartInstance.on('mouseover',()=>{
                clearInterval(this.timerId)

            })
            this.chartInstance.on('mouseout',()=>{
                this.startInterval();
            })
        },
        async getData(){
            const {data:ret} =await axios.get('http://127.0.0.1:8888/seller');
            this.allData =ret;
            // this.updateCharts();
            this.totalPage =this.allData.length%5==0?this.allData.length/5:this.allData.length/5+1
            this.startInterval();
            
        },
        updateCharts(){
            const start =(this.currentPage-1)*5;
            const end =this.currentPage*5

            const showData =this.allData.slice(start,end);
            const sellerNames =showData.map((item)=>{
                return item.name;
            });
            console.log(sellerNames);
            const sellerValues =showData.map((item)=>{
                return item.value;
            })
            console.log(sellerValues)
            const dataOption={
                
                yAxis:{
                    data:sellerNames
                },
                series:[
                    {   
                        data:sellerValues,
                    }
                ]
                
            }
            this.chartInstance.setOption(dataOption)
        },
        startInterval(){
            if(this.timerId){
                clearInterval(this.timerId);
            }
            this.timerId =setInterval(()=>{
                this.currentPage++;
                if(this.currentPage>this.totalPage){
                    this.currentPage=1;
                }
                this.updateCharts();
            },3000);
        },
        screenAdapter(){
            const titleFontSize =this.$refs.seller_ref.offsetWidth/100*3.6
            console.log(this.$refs.seller_ref.offsetWidth);
            const adapterOption ={
                tooltip:{
                    axisPointer:{
                        lineStyle:{
                            width:titleFontSize,
                        }
                    }
                },
                title:{
                    textStyle:{
                        fontSize:titleFontSize
                    },
                },
                series:[
                    {
                        barWidth:titleFontSize,
                        itemStyle:{
                            barBorderRadius:[0,titleFontSize/2,titleFontSize/2,0],
                        }
                    }
                ]
                
            
            }
            // this.windowHeight =window.innerHeight;
            this.chartInstance.setOption(adapterOption);
            this.chartInstance.resize();

        }

    }

}
</script>

<style>

</style>